<template>
  <div id="headerBg">
    <div class="header">
        <a-row justify="center" align="middle" :gutter="{ xs: 8, sm: 16, md: 0, lg: 0 }">
        <!-- logo -->
            <a-col :xs="8" :sm="8" :md="4" :xl="4" flex>
                <div class="logo">
                    <img src="../../assets/logo.png" alt="加载失败！">
                </div>
            </a-col>
            <!-- 导航 -->
            <a-col :xs="8" :sm="8" :md="16" :xl="16" flex>
                <div class="nav">
                    <a-row justify="center" align="middle" :gutter="{ xs: 8, sm: 0, md: 0, lg: 0 }">
                        <a-col align="center" v-for="(item,index) in navData" :key="index" :xs="navData[index].active == true ? 24 : 0" :sm="navData[index].active == true ? 24 : 0" :md="24 / navData.length" :xl="24 / navData.length" flex>
                            <template v-if="!item.children">
                                <a href="#" id="a" :class="{active:item.active == true}" @click.prevent="changeNav(index,item.path)">{{item.meta.title}}</a>
                            </template>
                            <!-- 下拉列表 -->
                            <a-dropdown placement="bottom" overlayClassName=".he" :overlayStyle="{'padding-top':'20px','width':'auto'}" v-else>
                                <a href="#" id="a" class="ant-dropdown-link" :class="{active:item.active == true}" @click.prevent="11">
                                    {{item.meta.title}}
                                    <down-outlined />
                                </a>
                                <template #overlay>
                                    <a-menu>
                                        <a-menu-item v-for="(it,i) in item.children" :key="i">
                                            <a href="javascript:;" @click.prevent="changeNav(index,it.path)">{{it.meta.title}}</a>
                                        </a-menu-item>
                                    </a-menu>                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        
                                </template>
                            </a-dropdown>
                            <p class="he"></p>
                        </a-col>
                    </a-row>
                </div>
            </a-col>
            <!-- 右边 -->
            <a-col :xs="8" :sm="8" :md="4" :xl="4" flex>
                <div class="other">
                    <a-row justify="center" align="middle" :gutter="{ xs: 8, sm: 10, md: 10, lg: 10 }">
                        <!-- 搜索 -->
                        <a-col :xs="8" :sm="8" :md="12" :xl="12" title="搜索">
                            <a href="#" @click.prevent="0">
                                <svg id="headerIcon" t="1658304083503" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="18702" :width="iconSize" :height="iconSize"><path d="M862.609 816.955L726.44 680.785l-0.059-0.056a358.907 358.907 0 0 0 56.43-91.927c18.824-44.507 28.369-91.767 28.369-140.467 0-48.701-9.545-95.96-28.369-140.467-18.176-42.973-44.19-81.56-77.319-114.689-33.13-33.129-71.717-59.144-114.69-77.32-44.507-18.825-91.767-28.37-140.467-28.37-48.701 0-95.96 9.545-140.467 28.37-42.973 18.176-81.56 44.19-114.689 77.32-33.13 33.129-59.144 71.717-77.32 114.689-18.825 44.507-28.37 91.767-28.37 140.467 0 48.7 9.545 95.96 28.37 140.467 18.176 42.974 44.19 81.561 77.32 114.69 33.129 33.129 71.717 59.144 114.689 77.319 44.507 18.824 91.767 28.369 140.467 28.369 48.7 0 95.96-9.545 140.467-28.369 32.78-13.864 62.997-32.303 90.197-54.968 0.063 0.064 0.122 0.132 0.186 0.195l136.169 136.17c6.25 6.25 14.438 9.373 22.628 9.373 8.188 0 16.38-3.125 22.627-9.372 12.496-12.496 12.496-32.758 0-45.254z m-412.274-69.466c-79.907 0-155.031-31.118-211.534-87.62-56.503-56.503-87.62-131.627-87.62-211.534s31.117-155.031 87.62-211.534c56.502-56.503 131.626-87.62 211.534-87.62s155.031 31.117 211.534 87.62c56.502 56.502 87.62 131.626 87.62 211.534s-31.118 155.031-87.62 211.534c-56.503 56.502-131.627 87.62-211.534 87.62z" p-id="18703"></path></svg>
                            </a>
                        </a-col>
                        <!-- 我的 -->
                        <a-col :xs="8" :sm="8" :md="12" :xl="12" title="我的">
                            <a href="#" @click.prevent="0">
                                <svg id="headerIcon" t="1658303087163" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="16368" :width="iconSize" :height="iconSize"><path d="M885.333333 96c23.786667 0 39.253333 25.034667 28.618667 46.314667a7024.8 7024.8 0 0 0-56.917333 116.234666A424.853333 424.853333 0 0 1 938.666667 509.589333c0 235.637333-191.029333 426.666667-426.666667 426.666667s-426.666667-191.029333-426.666667-426.666667c0-235.648 191.029333-426.666667 426.666667-426.666666a424.938667 424.938667 0 0 1 196.544 47.872C762.453333 107.573333 821.482667 96 885.333333 96z m-164.234666 99.381333a32 32 0 0 1-29.696-1.066666A360.821333 360.821333 0 0 0 512 146.933333c-200.298667 0-362.666667 162.368-362.666667 362.666667 0 200.288 162.368 362.666667 362.666667 362.666667s362.666667-162.378667 362.666667-362.666667a360.96 360.96 0 0 0-79.850667-227.061333 32 32 0 0 1-4-33.706667 5870.922667 5870.922667 0 0 1 41.322667-85.589333c-39.786667 4.970667-76.768 15.701333-111.04 32.149333zM330.666667 362.666667a42.666667 42.666667 0 0 1 42.666666 42.666666v64a42.666667 42.666667 0 1 1-85.333333 0v-64a42.666667 42.666667 0 0 1 42.666667-42.666666z m170.666666 0a42.666667 42.666667 0 0 1 42.666667 42.666666v64a42.666667 42.666667 0 1 1-85.333333 0v-64a42.666667 42.666667 0 0 1 42.666666-42.666666z" p-id="16369"></path></svg>
                            </a>
                        </a-col>
                        <!-- 更多 -->
                        <a-col :xs="8" :sm="8" :md="0" :xl="0" @click="isShowVisible" title="导航">
                            <a href="#" @click.prevent="0">
                                <svg id="headerIcon" t="1658302944884" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="16076" :width="iconSize" :height="iconSize"><path d="M832 229.333333a37.333333 37.333333 0 0 1 3.072 74.538667L832 304H192a37.333333 37.333333 0 0 1-3.072-74.538667L192 229.333333h640zM832 485.333333a37.333333 37.333333 0 0 1 3.072 74.538667L832 560H533.333333a37.333333 37.333333 0 0 1-3.072-74.538667L533.333333 485.333333h298.666667zM832 741.333333a37.333333 37.333333 0 0 1 3.072 74.538667L832 816H341.333333a37.333333 37.333333 0 0 1-3.072-74.538667L341.333333 741.333333h490.666667z" p-id="16077"></path></svg>
                            </a>
                        </a-col>
                    </a-row>
                </div>
            </a-col>
        </a-row>
        <!-- 抽屉 -->
        <a-drawer
            v-model:visible="visible"
            class="custom-class"
            title="欢迎访问 Capricornus 的个人博客"
            placement="right"
            @after-visible-change="afterVisibleChange"
        >
            <a-menu
                v-model:selectedKeys="selectedKeys"
                class="menu"
                mode="inline"
                @select="selectChange"
                >
                <div v-for="(item,index) in navData" :key="index">
                    <a-menu-item :title="item.title" v-if="!item.children" :key="index" @click.prevent="changeNav(index,item.path)">{{item.meta.title}}</a-menu-item>
                    <a-sub-menu :key="item.meta.title" v-else>
                        <template #title>{{item.meta.title}}</template>
                        <a-menu-item :key="it.meta.title" v-for="(it,i) in item.children" @click.prevent="changeNav(index,it.path)">{{it.meta.title}}</a-menu-item>
                    </a-sub-menu>
                </div>
            </a-menu>
        </a-drawer>
    </div>
  </div>
</template>

<script>
import { getCurrentInstance, onMounted, reactive, toRefs} from 'vue'
import {Drawer,Menu,SubMenu,MenuItem,Dropdown} from 'ant-design-vue'
import {MailOutlined,DownOutlined} from '@ant-design/icons-vue'
export default {
name:'Header',
props:{
    navData:{
        type:Array,
        default:[]
    }
},
setup(props) {
    const {proxy} = getCurrentInstance()

    const data = reactive({
        iconSize:24, // 图标大小
        visible:false, // 是否显示抽屉
        selectedKeys:[], // 当前选中的菜单
        isShowVisible(){ // 点击显示抽屉
            data.visible = true
        },
        afterVisibleChange(bol){ // 抽屉动画结束后的回调
            
        },
        selectChange(value){ // 菜单旋选中回调
            // data.selectedKeys = value.key
        },
        changeNav(i,paths){
            // 拼接路径 用于跳转
            let path = props.navData[i].path == paths ? paths : props.navData[i].path + '/' + paths
            // 如果是选中或点击无效标题则返回
            if(paths == undefined) return
            // 将所有状态设置为false
            props.navData.forEach(item =>{
                item.active = false
            })
            // 将点击的标识设置为true
            props.navData[i].active = true  
            proxy.mittBus.emit('toRouter',path)
        }
    })

    onMounted(()=>{
        proxy.mittBus.on('changNva',(i)=>{
            // 将所有状态设置为false
            props.navData.forEach(item =>{
                item.active = false
            })
            props.navData[i].active = true  // 将点击的标识设置为true
        })
    })

    return {
        ...toRefs(data)
    }
},
components:{ADrawer:Drawer,AMenu:Menu,ASubMenu:SubMenu,AMenuItem:MenuItem,ADropdown:Dropdown,MailOutlined,DownOutlined}
}
</script>

<style lang="less" scoped>
@import url('@/assets/less/color.less');

@height: 80px;
#headerBg{
    transition: all 0.5s;
    position: fixed;
    z-index: 999;
    top: 0;
    left: 0;
    right: 0;
    height:@height;
    .header{
        height: @height;
        .logo{
            width: 40px;
            height: 40px;
            img{
                cursor:pointer;
                width: 100%;
                height: 100%;
            }
        }
        .nav{
            .ant-row{
                .ant-col{
                    position: relative;
                    a{
                        display: block;
                        font-size: 1.8rem;
                        font-weight: 600;
                        color: @bg-color;
                        // text-shadow: 0px 0px 6px #999;
                    }
                    p{
                        transition: all 0.5s;
                        width: 0px;
                        height: 4px;
                        position: absolute;
                        left: 0;
                        bottom: -26px;
                        margin: 0;
                        background: @f-active;
                    }
                    .active{
                        color: @f-active !important;
                        text-shadow: none;
                    }
                }
                .ant-col:hover{
                    p{
                        width: 100%;
                    }
                }
            }
        }
        .other{
            height: @height !important;
            display: flex;
            justify-content: right;
            align-items: center;
            a{
                padding: 4px;
                display: flex;
                align-items: center;
                justify-content: center;
                svg{
                    transition: all 0.5s;
                    cursor:pointer;
                    fill: @bg-color;
                }
                &:hover{
                    svg{
                        fill: @f-active !important;
                    }
                }
            }
        }
        // 抽屉
        .custom-class{
            z-index: 99999999;
            .menu{
                width: 100%;
                border: none;
            }
        }
    }
}
.height{
    background-color: @bg-color;
    box-shadow: 0px 3px 10px @bs-color;
    a{
        color: @f-color !important;
    }
    svg{
        fill: @f-color !important;
    }
}
</style>